<template>
  <div class="loginmian">
    <div class="loginbody">
      <div class="loginbox">
        <span>web资源管理系统</span>
      </div>
    </div>
    <div class="loginform">
      <div class="formbox">
        <div class="formtitle">登录</div>
        <el-form
          class="formitem"
          ref="loginFormRef"
          :model="loginForm"
          :rules="dataRule"
        >
          <el-form-item class="itme" prop="stuNumber">
            <i class="el-icon-user"></i>
            <span>学号</span>
            <el-input
              placeholder="请输入学号 "
              v-model="loginForm.stuNumber"
            ></el-input>
          </el-form-item>
          <el-form-item class="itme" prop="password">
            <i class="el-icon-lock"></i>
            <span>密码</span>
            <el-input
              placeholder="请输入密码"
              type="password"
              v-model="loginForm.password"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="forminput">
          <!--          <el-button @click="goTo()" >注册</el-button>-->
          <el-button type="primary" @click="login()">登陆</el-button>
          <router-link to="/register"
            ><el-button type="primary" round>注册</el-button></router-link
          >
        </div>
      </div>
    </div>
    <div v-on:keyup.enter="login"></div>
  </div>
</template>

<script>
import Axios from "axios";
import Cookies from 'js-cookie'
import { setToken } from "@/utils/auth";
export default {
  data() {
    return {
      week: '',
      loginForm: {
        stuNumber: "",
        password: "",
      },
      dataRule: {
        stuNumber: [
          {
            required: true,
            message: "学号不能为空",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    //获取星期
    this.getdataTime()
  },
  methods: {
    getdataTime() {
      let wk = new Date().getDay()
      let weeks = ['0', '1', '2', '3', '4', '5', '6']
      this.week = weeks[wk]
    },
    login() {
      // 校验规则
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$http.post(
          "http://113.118.193.85:17088/user/login",
          this.loginForm
        );
        if (res.status !== 200) return this.$message.error("登录失败！");
        this.$message.success("登录成功!");
        // 增加cookie缓存GGJ
        Cookies.set("userId", res.data);
        Cookies.set("week",this.week);
        // console.log(JSON.parse(Cookies.get("week")));
        setToken("1");
        this.$store.dispatch("permission/generateRoutes");
        this.$router.push("/");
      });
    },

    //  goTo() {
    //    this.$router.push('/')
    //  }
    // },
    // mounted() {
    //   document.onkeydown = (e) => {
    //     let e1 =
    //       e || event || window.event || arguments.callee.caller.arguments[0]
    //     if (e1 && e1.keyCode == 13) {
    //       this.login()
    //     }
    //   }
  },
};
</script>
<style>
.loginmian {
  background-image: url("./assets/bj.png");
  background-size: 100% 100%;
  position: relative;
  height: 100vh;
}
.loginmian .loginbody {
  color: #fff;
  position: absolute;
  height: 110px;
  width: 100%;
  z-index: 99;
}
.loginmian .loginbox {
  font-size: 39px;
  /*margin: 0 auto;*/
  writing-mode: horizontal-tb;
  /*height: 500px;*/
  margin-top: 100px;
  text-align: center;
  letter-spacing: 20px;
  /*display: flex;*/
  /*justify-content: space-between;*/
  /*align-items: center;*/
}
.loginmian .loginform {
  width: 385px;
  height: 400px;
  background-color: #fff;
  position: absolute;
  z-index: 99;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  border-radius: 15px;
}
.loginmian .loginform .formbox {
  margin: 30px 40px;
  /* height: 100%; */
  position: relative;
}
.loginmian .loginform .formbox .formtitle {
  font-size: 26px;
  font-weight: 600;
  height: 60px;
  color: #333;
  text-align: center;
}
.loginmian .loginform .formbox .formitem .itme {
  height: 80px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ebebeb;
}
.loginmian .loginform .formbox .formitem img {
  cursor: pointer;
  position: absolute;
  bottom: 0;
}
.loginmian .loginform .formbox .formitem div span {
  font-weight: 600;
  width: 45px;
  color: #000;
  padding: 0 15px;
  border-right: 1px #ebebeb solid;
}
.register {
  float: right;
  margin-top: 15px;
  margin-right: 15px;
}
.loginmian .loginform .formbox .el-button {
  width: 100%;
  /* position: absolute;
  bottom: 60px; */
  margin-top: 20px;
  border-radius: 20px;
}

.loginmian .imgshade {
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  width: 100%;
  height: 100%;
}
.loginmian .el-carousel {
}
.loginmian .el-carousel .backgroundimg {
  width: 100%;
  height: 100%;
}
.loginmian .el-carousel__arrow {
  width: 0px;
  height: 0px;
}
.loginmian .el-carousel__arrow i {
  display: none;
}
.loginmian .el-carousel__indicators--horizontal {
  bottom: 30%;
  transform: translateX(0);
  left: 14%;
}
.loginmian
  .el-carousel__indicators--horizontal
  .el-carousel__indicator--horizontal {
  padding: 12px;
}
.loginmian .el-carousel__indicators--horizontal .el-carousel__button {
  width: 55px;
  height: 4px;
}

.loginmian .el-input__inner {
  border: 0px;
}
.loginmian .el-input {
  width: auto;
}
.loginmian .el-form-item {
  margin-bottom: 0px;
}
</style>
